<template>
  <div class="product-sorts">
    <div id="floating-banner" class="floating-banner">
      <div class="banner-content">
        <img
          src="../../../assets/imgs/product_sorts/float_img.png"
          alt="浮动广告"
          @click="handleBannerClick"
          v-if="!authStore.isLoggedIn"
        />
      </div>
    </div>
    <div class="left-section">
      <div class="sorts">
        <div class="category-icon-wrapper">
          <img
            src="../../../assets/imgs/product_sorts/un_hold.png"
            alt="分类图标"
            class="category-icon"
          />
          <img
            src="../../../assets/imgs/product_sorts/hover_img.png"
            alt="分类悬停图"
            class="hover-img"
          />
        </div>
        <ul class="category-list">
          <li
            v-for="category in categories"
            :key="category.id"
            :class="{ active: activeCategory === category.id }"
            @mouseenter="showSubMenu(category.id)"
            @mouseleave="hideSubMenu()"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
            <span class="expand-icon" v-if="category.children">›</span>

            <div
              class="submenu"
              :class="{ 'submenu-visible': activeSubMenu === category.id && category.children }"
              @mouseenter="keepSubMenu(category.id)"
              @mouseleave="hideSubMenu()"
            >
              <div class="submenu-content">
                <div
                  v-for="subCategory in category.children"
                  :key="subCategory.id"
                  class="submenu-item"
                >
                  <a href="#">{{ subCategory.name }}</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="center-section">
      <div class="icon-sorts-container">
        <div
          class="icon-sorts"
          v-for="item in iconSorts"
          :key="item.id"
          @click="handleIconClick(item)"
        >
          <img :src="item.icon" alt="" class="iconfont" />
          <span>{{ item.sorts }}</span>
        </div>
      </div>
      <div class="coursel-container">
        <div class="item1" style="background-color: #fff">
          <el-carousel height="130px">
            <el-carousel-item v-for="(item, index) in courselImgs" :key="index">
              <div class="carousel-content">
                <img :src="item.url" alt="" />
                <div class="carousel-text">
                  <h3>{{ item.title || '默认标题' }}</h3>
                  <p>{{ item.desc || '默认描述文字' }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="item2">
          <div class="top-header">
            <h4>国家补贴 × 百亿补贴</h4>
            <span>官方限时补</span>
          </div>
          <div class="items" v-for="(item, index) in item2s" :key="index">
            <img :src="item.url" alt="" />
            <p class="maintitle">{{ item.title }}</p>
            <span class="subtitle">{{ item.subtitle }}</span>
          </div>
        </div>
        <div class="item3">
          <div class="items" v-for="(item, index) in item3s" :key="index">
            <div class="item3-2"></div>
            <h4>{{ item.title }}</h4>
            <img :src="item.url" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </div>
        <div class="item4">
          <div class="items" v-for="(item, index) in item4s" :key="index">
            <div class="group">
              <h3>{{ item.title }}</h3>
              <img :src="item.url" alt="" />
              <p class="price">￥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-section">
      <!-- 登录状态区域 -->
      <div class="auth-section">
        <div class="login-form" v-if="!authStore.isLoggedIn">
          <img src="../../../assets/imgs/product_sorts/jd_avator.png" alt="京东头像" />
          <h2 class="title">Hi~{{ greeting }}</h2>
          <span class="text">登录京东后享受更多优惠</span>
          <button class="btn-login" @click.prevent="handleLoginClick">立即登录</button>
          <span class="register" @click="goReister">注册></span>
          <LoginDialog v-model="dialogVisible" />
        </div>

        <div class="user-info" v-else>
          <div class="user-header">
            <img
              :src="authStore.user?.avatar || '../../../assets/imgs/login/hint_img.png'"
              alt="用户头像"
            />
            <div class="user-name">Hi, {{ authStore.user?.username }}</div>
          </div>
          <div class="user-benefits">
            <div class="benefit-item" v-for="item in userBenefits" :key="item.text">
              <span class="benefit-icon">{{ item.icon }}</span>
              <span class="benefit-text">{{ item.text }}</span>
            </div>
          </div>
          <button class="btn-logout" @click="authStore.logout">退出登录</button>
        </div>
      </div>

      <!-- 始终显示的区域 -->
      <div class="others">
        <div class="promo-section">
          <div class="promo-item" v-for="item in promoItems" :key="item.id">
            <div class="promo-text">
              <div class="main-text-container">
                <span class="main-text">{{ item.mainText }}</span>
                <span class="red-dot" v-if="item.showDot"></span>
              </div>
              <div class="sub-text">{{ item.subText }}</div>
            </div>
          </div>
        </div>
        <div class="quick-access">
          <div
            class="access-item"
            v-for="(item, index) in gridItems"
            :key="index"
            @click="goPush(item)"
          >
            <div class="icon">{{ item.icon }}</div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <DrawerView ref="drawerRef" :categories="categories" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import LoginDialog from '@/components/login/LoginDialog.vue'
import DrawerView from '@/components/drawer/DrawerView.vue'
import router from '@/router'
import { getGreeting } from '@/utils/greeting'
//状态引入
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
authStore.initialize()
const drawerRef = ref(null)
const dialogVisible = ref(false)
const greeting = computed(() => {
  return getGreeting() // 调用导入的工具函数，返回当前时间段的问候语
})
// 默认选中家用电器
const activeCategory = ref(3)
// 当前显示的二级菜单
const activeSubMenu = ref(null)
// 生命周期
import { onMounted, onUnmounted } from 'vue'
// 工具函数
import { setupScrollAwareTooltip } from '@/utils/setupScrollAwareTooltip'

// 计算页面高度的80%位置
const calculateBannerPosition = () => {
  return window.innerHeight * 0.75
}
// 清理函数
let cleanup = null

onMounted(() => {
  // 设置悬浮条幅的位置和行为
  const result = setupScrollAwareTooltip('floating-banner', calculateBannerPosition())
  // 确保cleanup是一个函数
  cleanup = typeof result === 'function' ? result : null
})

onUnmounted(() => {
  // 清理事件监听，确保cleanup是函数再调用
  if (typeof cleanup === 'function') {
    cleanup()
  }
})
// 登录
const handleLoginClick = () => {
  dialogVisible.value = true
}
const handleBannerClick = () => {
  dialogVisible.value = true // 直接复用已有的dialogVisible控制变量
}
// 注册
const goReister = () => {
  router.push('./register')
}

// 轮播图
import climg1 from '../../../assets/imgs/product_sorts/coursels/img1.png'
import climg2 from '../../../assets/imgs/product_sorts/coursels/img2.png'
import climg3 from '../../../assets/imgs/product_sorts/coursels/img3.png'
import climg4 from '../../../assets/imgs/product_sorts/coursels/img4.png'
import climg5 from '../../../assets/imgs/product_sorts/coursels/img5.png'

const courselImgs = [
  {
    url: climg1,
    title: '热门促销',
    desc: '限时5折起',
    textPosition: 'left',
  },
  {
    url: climg2,
    title: '新品上市',
    desc: '抢先体验',
    textPosition: 'right',
  },
  {
    url: climg3,
    title: '冰箱天天特价',
    desc: '限时5超值乐购折起',
    textPosition: 'left',
  },
  {
    url: climg4,
    title: '手机购惊喜',
    desc: '爆款疯抢',
    textPosition: 'right',
  },
  {
    url: climg5,
    title: '空调新款速递',
    desc: '人气疯抢嗨翻天',
    textPosition: 'right',
  },
]

// 分类数据（添加了二级分类）
const categories = ref([
  {
    id: 1,
    name: '手机 / 运营商 / 数码',
    children: [
      { id: 101, name: '手机通讯' },
      { id: 102, name: '运营商' },
      { id: 103, name: '摄影摄像' },
      { id: 104, name: '数码配件' },
    ],
  },
  {
    id: 2,
    name: '电脑 / 办公 / 文具用品',
    children: [
      { id: 201, name: '笔记本' },
      { id: 202, name: '台式机' },
      { id: 203, name: '办公设备' },
      { id: 204, name: '文具' },
    ],
  },
  {
    id: 3,
    name: '家用电器',
    children: [
      { id: 301, name: '电视' },
      { id: 302, name: '空调' },
      { id: 303, name: '洗衣机' },
      { id: 304, name: '冰箱' },
      { id: 305, name: '厨卫电器' },
    ],
  },
  { id: 4, name: '家居 / 家具 / 家装 / 厨具' },
  { id: 5, name: '男装 / 女装 / 童装 / 内衣' },
  { id: 6, name: '美妆 / 个护清洁 / 宠物' },
  { id: 7, name: '女鞋 / 箱包 / 钟表 / 珠宝' },
  { id: 8, name: '男鞋 / 运动 / 户外' },
  { id: 9, name: '房产 / 汽车 / 汽车用品' },
  { id: 10, name: '母婴 / 玩具乐器' },
  { id: 11, name: '食品 / 酒类 / 生鲜 / 特产' },
])

// 用户权益数据
const userBenefits = [
  { icon: '🎁', text: '领券中心' },
  { icon: '🛍️', text: '我的订单' },
  { icon: '❤️', text: '我的收藏' },
  { icon: '🎈', text: '会员中心' },
]

//引入图标
import icon_img1 from '@/assets/imgs/product_sorts/icons/img1.png'
import icon_img2 from '@/assets/imgs/product_sorts/icons/img2.png'
import icon_img3 from '@/assets/imgs/product_sorts/icons/img3.png'
import icon_img4 from '@/assets/imgs/product_sorts/icons/img4.png'
import icon_img5 from '@/assets/imgs/product_sorts/icons/img5.png'
import icon_img6 from '@/assets/imgs/product_sorts/icons/img6.png'
import icon_img7 from '@/assets/imgs/product_sorts/icons/img7.png'
const iconSorts = ref([
  { id: 1, icon: icon_img1, sorts: '京东新品', type: 'phone', path: '/newproducts' },
  { id: 2, icon: icon_img2, sorts: '司法拍卖', type: 'computer', path: '/sifa' },
  { id: 3, icon: icon_img3, sorts: '家电馆', type: 'appliance', path: '/c' },
  { id: 4, icon: icon_img4, sorts: '食品馆', type: 'food', path: '/foods' },
  { id: 5, icon: icon_img5, sorts: '服装馆', type: 'clothes', path: '/clothes' },
  { id: 6, icon: icon_img6, sorts: '美妆馆', type: 'makeup', path: 'beautiful' },
  { id: 7, icon: icon_img7, sorts: '全部频道', type: 'all', path: '/a' },
])

// 处理图标点击事件
const handleIconClick = (item) => {
  if (item.type === 'all') {
    // 打开全部频道抽屉
    drawerRef.value.open('all')
  } else {
    // 其他图标跳转到对应路径
    router.push(item.path)
  }
}

const promoItems = ref([
  { id: 1, mainText: '享优惠', subText: '优惠券', showDot: true },
  { id: 2, mainText: '赚京豆', subText: '京豆', showDot: true },
  { id: 3, mainText: '抽¥50', subText: '红包', showDot: true },
  { id: 4, mainText: '购卡返', subText: '京东E卡', showDot: false },
])

const gridItems = [
  { icon: '🎀', text: '天天领好礼', url: '/signin' },
  { icon: '♻️', text: '爱回收', url: '/recyle' },
  { icon: '🛠️', text: '以旧换新', url: '/tradein' },
  { icon: '📱', text: '手机充值', url: '/topup' },
  { icon: '🏦', text: '京东联名卡' },
  { icon: '💉', text: '护士上门' },
  { icon: '🛒', text: '优惠券' },
  { icon: '🟠', text: '京豆' },
  // { icon: '💰', text: '红包' },
  // { icon: '🎫', text: '京东E卡' },
]
const goPush = (item) => {
  router.push(item.url)
  // 根据需要添加具体的跳转或操作逻辑
}
// 引入图片
import bimg1 from '../../../assets/imgs/product_sorts/img1.png'
const item2s = [
  { url: bimg1, title: '￥568.9', subtitle: '已补26.55元' },
  { url: bimg1, title: '￥568.9', subtitle: '已补26.55元' },
  { url: bimg1, title: '￥568.9', subtitle: '已补26.55元' },
]

import live_house from '../../../assets/imgs/product_sorts/live_house.png'
import new_product from '../../../assets/imgs/product_sorts/new_product.png'
const item3s = [
  { url: new_product, text: '京东直播', title: '主播精选' },
  { url: live_house, text: '抢先体验', title: '￥1999' },
]

import nimg1 from '../../../assets/imgs/product_sorts/shop_product1.png'
import nimg2 from '../../../assets/imgs/product_sorts/shop_product2.png'

const item4s = [
  { url: nimg1, title: '京东秒杀', price: '40.5 秒杀价' },
  { url: nimg2, title: '9.9包邮', price: '17.9' },
]

// 分类菜单方法
const showSubMenu = (id) => {
  activeSubMenu.value = id
}

const hideSubMenu = () => {
  activeSubMenu.value = null
}

const keepSubMenu = (id) => {
  activeSubMenu.value = id
}

const selectCategory = (id) => {
  activeCategory.value = id
}
</script>

<style scoped lang="scss">
.product-sorts {
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding-right: 30px;

  .floating-banner {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 15px;
    height: 60px;
    background-color: rgba(49, 50, 50, 0.4);
    margin-left: 120px;
    .banner-content {
      color: white;
      text-align: center;

      img {
        height: 50px;
        background: url(https://m.360buyimg.com/babel/jfs/t20271129/198967/2/51155/47768/674939c1F7b755827/fc27f486924e10ca.png)
          center top / 100% 100% no-repeat;
      }
    }
  }

  .left-section {
    flex: 0.2;
    min-width: 300px;
    height: auto;

    .sorts {
      display: flex;
      height: 250px;
      align-items: flex-start;
      background: rgb(247, 248, 252);
      border-radius: 4px;
      padding: 5px;
      font-size: 14px;
      position: relative;

      .category-icon-wrapper {
        position: relative;
        width: 80px;
        height: 100%;
        margin-right: 15px;

        .category-icon {
          width: 100%;
          height: auto;
          object-fit: contain;
          position: relative;
          z-index: 1;
        }

        .hover-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 700px;
          height: 350px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          z-index: 10;
        }

        &:hover .hover-img {
          opacity: 1;
          visibility: visible;
        }
      }

      .category-icon {
        width: 80px;
        height: auto;
        margin-right: 15px;
        object-fit: contain;
      }

      .category-list {
        flex: 1;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        position: relative;

        li {
          position: relative;
          padding: 5px 8px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 0.2s;
          border-left: 3px solid transparent;
          font-size: 14px;
          z-index: 1;

          &:hover {
            background: #f5f5f5;
            color: #e4393c;
          }

          &.active {
            border-left-color: #e4393c;
            background: #fdf2f2;
            color: #e4393c;
            font-weight: bold;
          }

          .expand-icon {
            color: #999;
            font-weight: bold;
            margin-left: 10px;
          }

          /* 二级菜单样式 */
          .submenu {
            position: absolute;
            left: 100%;
            top: 0;
            width: 600px;
            min-height: 100%;
            background: #fff;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #eee;
            border-radius: 4px;
            display: flex;
            padding: 15px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(10px);
            transition: all 0.3s ease;
            z-index: 1000;

            &.submenu-visible {
              opacity: 1;
              visibility: visible;
              transform: translateX(0);
            }

            .submenu-content {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              width: 600px;
              height: 100%;
              border: 1px solid red;

              .submenu-item {
                width: calc(23.33% - 10px);
                padding: 8px;
                transition: all 0.2s;

                &:hover {
                  background: #f5f5f5;
                }

                a {
                  color: #666;
                  text-decoration: none;
                  font-size: 14px;

                  &:hover {
                    color: #e4393c;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .center-section {
    flex: 0.6;
    display: flex;
    gap: 15px;
    flex-direction: column;
    border-radius: 4px;

    .icon-sorts-container {
      display: flex;
      width: 100%;
      justify-content: space-around;
      flex-wrap: nowrap;
      gap: 0x;
      background-color: rgb(247, 248, 252);
    }

    .icon-sorts {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      gap: 3px;
      transition: background-color 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      img {
        width: 18px;
        height: 18px;
      }

      span {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
      }
    }

    .coursel-container {
      display: grid;
      grid-template-columns: 400px auto;
      grid-template-rows: 140px 140px;
      gap: 10px;

      .item1 {
        :deep(.el-carousel) {
          .el-carousel__indicators {
            position: absolute;
            bottom: 5px;
            left: 12px;
            transform: none;
            justify-content: flex-start;

            .el-carousel__indicator {
              padding: 0 4px;

              .el-carousel__button {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: rgb(255, 255, 255);
                transition: all 0.3s;
              }
            }
          }
        }

        .carousel-content {
          position: relative;
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
          }

          .carousel-text {
            position: absolute;
            bottom: 30px;
            left: 30px;
            color: white;
            max-width: 60%;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

            &[data-position='right'] {
              left: auto;
              right: 30px;
              text-align: right;
            }

            h3 {
              font-size: 22px;
              font-weight: bold;
              margin-bottom: 10px;
            }

            p {
              font-size: 16px;
              margin-bottom: 15px;
            }
          }
        }
      }

      .item2 {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 33% 33% 33%;
        background-color: rgb(247, 248, 252);
        border-radius: 5px;

        .top-header {
          grid-column: span 3;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          margin-top: -10px;
        }

        h4 {
          font-size: 16px;
          font-weight: 700;
        }

        span {
          font-size: 14px;
          color: #85691a;
        }

        .items {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 5px;

          img {
            width: 56px;
            height: 56px;
            margin-top: 45px;
          }

          .maintitle {
            font-size: 16px;
            color: #ff0f23;
            margin-bottom: 0;
          }

          .subtitle {
            font-size: 12px;
            color: #ff0f23;
            margin-top: -10px;
          }
        }
      }

      .item3 {
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 100%;
        background-color: rgb(247, 248, 252);
        border-radius: 5px;

        .top-header {
          grid-column: span 3;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          margin-top: -10px;
        }

        h4 {
          font-size: 16px;
          font-weight: 700;
        }

        span {
          font-size: 14px;
          color: #85691a;
        }

        .items {
          gap: 5px;

          img {
            width: 56px;
            height: 56px;
          }

          .maintitle {
            font-size: 16px;
            color: #ff0f23;
            margin-bottom: 0;
          }

          .subtitle {
            font-size: 12px;
            color: #ff0f23;
            margin-top: 5px;
          }
        }
      }

      .item4 {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 100%;
        background-color: rgb(247, 248, 252);
        border-radius: 5px;
        grid-auto-columns: 10px;

        .items {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .group {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            h3 {
              font-weight: 700;
              font-size: 16px;
            }

            img {
              width: 56px;
              height: 56px;
            }

            .price {
              color: #ff0f23;
            }
          }
        }
      }
    }
  }

  .right-section {
    flex: 0.2;
    background: rgb(255, 247, 248);
    border-radius: 5px;
    width: 150px;
    margin-left: 15px;
    .login-form {
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;

      .title {
        font-weight: bold;
        font-size: 14px;
      }

      img {
        width: 60px;
        height: 60px;
      }

      .text {
        font-size: 10px;
      }

      button {
        background-color: rgb(255, 15, 35);
        width: 180px;
        height: 30px;
        color: #fff;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        margin-top: 10px;
      }

      .register {
        font-size: 12px;
        margin-top: 5px;
        cursor: pointer;
      }
    }

    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      // padding: 15px 0;

      .user-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;

        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          object-fit: cover;
        }

        .user-name {
          margin-top: 8px;
          font-size: 14px;
          font-weight: bold;
        }
      }

      .user-benefits {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        margin-bottom: 15px;

        .benefit-item {
          display: flex;
          align-items: center;
          padding: 5px;
          background: #fff;
          border-radius: 4px;
          cursor: pointer;

          &:hover {
            background: #f5f5f5;
          }

          .benefit-icon {
            margin-right: 5px;
            font-size: 16px;
          }

          .benefit-text {
            font-size: 12px;
            color: #333;
          }
        }
      }

      .btn-logout {
        width: 80%;
        padding: 6px 0;
        background: #f5f5f5;
        border: none;
        border-radius: 4px;
        color: #666;
        cursor: pointer;

        &:hover {
          background: #e4393c;
          color: white;
        }
      }
    }

    .others {
      display: flex;
      flex-direction: column;
      gap: 5px;
      // padding: 10px;
      background: rgb(247, 248, 252);
      border-radius: 4px;

      .promo-section {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;

        .promo-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          cursor: pointer;

          .promo-text {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .main-text-container {
              position: relative;
              display: inline-block;

              .main-text {
                font-size: 14px;
                font-weight: bold;
                color: #333;
              }

              .red-dot {
                position: absolute;
                top: -2px;
                right: -7px;
                width: 9.6px;
                height: 9.6px;
                background-color: red;
                border-radius: 50%;
              }
            }

            .sub-text {
              font-size: 10px;
              color: #666;
              margin-top: 2px;
            }
          }
        }
      }

      .quick-access {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;

        .access-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;

          .icon {
            font-size: 18px;
            margin-bottom: 5px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff9f9;
            border-radius: 50%;
            color: #e4393c;
          }

          .text {
            font-size: 10px;
            color: #333;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
